<div>
  <div class="banner-box">
    <div class="img-box active" style="background-image: url('../images/pages/index/index-banner1.jpg')"></div>
    <div class="img-box" style="background-image: url('../images/pages/index/index-banner2.jpg')"></div>
    <div class="img-box" style="background-image: url('../images/pages/index/index-banner3.jpg')"></div>
    <div class="img-box" style="background-image: url('../images/pages/index/index-banner4.jpg')"></div>
  </div>
</div>

<script>
  $(document).ready(function () {
    banner();
    
    function banner() {
      var activeIndex = 0;
      autoPlay();
      function angleClick(num) {
        activeIndex += num;
        if (activeIndex > $('#common-banner .img-box').length - 1) {
          activeIndex = 0;
        }
        if (activeIndex < 0) {
          activeIndex = $('#common-banner .img-box').length - 1;
        }
        setActive(activeIndex);
      }
      function setActive(index) {
        $('#common-banner .img-box').eq(index).addClass('active').siblings().removeClass('active');
      }
      function autoPlay() {
        setTimeout(function () {
          angleClick(1);
          autoPlay();
        }, 3000)
      }
    }
  })
</script>